<!DOCTYPE html>
<html style="height: 100%;">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商业画布</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="shortcut icon" href="favicon.ico">
    <link href="css/bootstrap.min.css" rel="stylesheet">      
    <link href="css/style.css" rel="stylesheet">
</head>
<style>
	.table{empty-cells:show;border-collapse:collapse;border-spacing:0;float: left;}
</style>
	<body style="background: #fff;overflow: scroll;position:relative;">
		<div class="tuzhi-content"  id="app">
			<img src="img/shangye_01.jpg"/>
			<div class="tuzhione shangye clearfix">
				<div class="leftcontent">
					<div class="xifencontent">
						<div class="contenttitle clearfix">
							<span>1</span>
							<p>CS-客户细分(customer segments)</p>
						</div>
						<div class="center-box">
							<p>描述：企业想要接触和服务的不同人群和组织。</p>
							<p>提示：大众市场，利基市场，区隔化市场，多元化市场，多边平台或多边市场。</p>
							<textarea v-on:blur="post" v-model="data.segments" rows="" cols=""></textarea>
						</div>
					</div>
					<div class="clearfix">						
						<div class="guanxi fl">
							<div class="contenttitle clearfix">
								<span>4</span>
								<p>CR-客户关系(customer relationships)</p>
							</div>
							<div class="center-box">
								<p>描述：与特定目标客户群体建立的关系类型。</p>
								<p>提示：个人助理，专用个人助理，自助服务，自动化服务，社区，共同创作。</p>
								<textarea v-on:blur="post" v-model="data.relationships" rows="" cols=""></textarea>
							</div>
						</div>
						<div class="guanxi fl">
							<div class="contenttitle clearfix">
								<span>3</span>
								<p>CH-渠道通路(channels)</p>
							</div>
							<div class="center-box">
								<p>描述：如何沟通，接触其目标客户而传递其价值主张，提升公司产品和服务在客户中的认知，帮助客户评估公司价值主张，协助客户购买特定产品和服务。</p>
								<p>提示：向客户传递价值主张，提供售后客户支持。</p>
								<textarea v-on:blur="post" v-model="data.channels" rows="" cols=""></textarea>
							</div>
						</div>	
					</div>
					<div class="xifencontent" style="margin: 10px 0;">
						<div class="contenttitle clearfix">
							<span>2</span>
							<p>VP-价值主张(value propositions)</p>
						</div>
						<div class="center-box">
							<p>描述：为特定目标客户创造价值的系列产品和服务。</p>
							<p>提示：新颖，性能，定制化，持续改善，设计，品牌/身份地位，价格，成本削减，风险抑制，可达性，便利性/可用性。</p>
							<textarea v-on:blur="post" v-model="data.propositions" rows="" cols=""></textarea>
						</div>
					</div>	
					<div class="clearfix">						
						<div class="guanxi fl">
							<div class="contenttitle clearfix">
								<span>7</span>
								<p>KA-关键业务(key activities)</p>
							</div>
							<div class="center-box">
								<p>描述：为了确保商业模式可行，企业必须做的重要的事情。</p>
								<p>提示：制造产品，问题解决，平台/网络。</p>
								<textarea v-on:blur="post" v-model="data.activities" rows="" cols=""></textarea>
							</div>
						</div>
						<div class="guanxi fl">
							<div class="contenttitle clearfix">
								<span>6</span>
								<p>KR-核心资源(key resources)</p>
							</div>
							<div class="center-box">
								<p>描述：让商业模式运转所必须的最重要因素。</p>
								<p>提示：实体资产，知识资产，人力资源，金融资产。</p>
								<textarea v-on:blur="post" v-model="data.resources" rows="" cols=""></textarea>
							</div>
						</div>	
					</div>	
					<div class="xifencontent" style="margin-top: 10px">
						<div class="contenttitle clearfix">
							<span>2</span>
							<p>KP-重要合作(key partnerships)</p>
						</div>
						<div class="center-box">
							<p>描述：让商业模式运转所需的供应商和合作伙伴的网络。</p>
							<p>提示：合作动机：商业模式的优化和规模经纪的运用，风险和不确定性的降低，特定资源和业务的获取。合作的类型：非竞争者之间的战略联盟关系，竞合（在竞争者之间的合作关系），为开发新业务而构建的合作关系，为确保可靠供应的购买方-供应商关系。</p>
							<textarea v-on:blur="post" v-model="data.partnerships" rows="" cols=""></textarea>
						</div>
					</div>						
				</div>
				<div class="rightcontent">
					<div class="xifencontent">
						<div class="contenttitle clearfix">
							<span>5</span>
							<p>RS-收入来源</br>(revenue streams)</p>
						</div>
						<div class="center-box">
							<p>描述：从每个客户群体获取的现金收入（需要从创收中扣除成本）获取收入的方式。</p>
							<p>提示：资产销售，使用收费，订阅收费，租赁收费，授权收费，经纪收费，广告收费。定价机制：固定定价，动态定价。</p>
							<textarea v-on:blur="post" v-model="data.revenue" rows="" cols=""></textarea>
						</div>
					</div>		
					<div class="xifencontent" style="margin-top: 30px;">
						<div class="contenttitle clearfix">
							<span>9</span>
							<p>CS-成本结构</br>(cost structure)</p>
						</div>
						<div class="center-box">
							<p>描述：运营一个商业模式所引发的所有成本。</p>
							<p>提示：成本结构：固定成本，可变成本，规模经济，范围经济。</p>
							<textarea v-on:blur="post" v-model="data.structure" rows="" cols=""></textarea>
						</div>
					</div>						
				</div>
			</div>
		</div>
  		
	</body>
    <script src="https://cdn.bootcss.com/jquery/2.2.0/jquery.min.js"></script>
	<script src="../js/all.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
	<script>
		var model= new Vue({
			el:'#app',	
			data:{
				use:ComFunJS.getQueryString('use'),
				teamId:ComFunJS.getQueryString('teamId'),
				data:{
					segments:"",
					relationships:"",
					channels:"",
					propositions:"",
					activities:"",
					resources:"",
					partnerships:"",
					revenue:"",
					structure:""
				},				
			},
			methods:{
				getlocation:function(){
					if(localStorage.getItem('shangye')!=''){
						model.data=JSON.parse(localStorage.getItem('shangye'))					
					}
				},
				post:function(){
					localStorage.setItem('shangye',JSON.stringify(model.data))
				},
	            initWebSocket(teamId){ //初始化weosocket
	                //ws地址
	                const wsuri = ComFunJS.WEBSORCTAPIURL("/webSocketServer/"+this.teamId) ;
	                this.websock = new WebSocket(wsuri);
	                this.websock.onmessage = this.websocketonmessage;
	                this.websock.onclose = this.websocketclose;
	            },
	            websocketonmessage(e){ //数据接收
	            	var _this=this;
					if(e!=undefined){
		            	var redata =JSON.parse(e.data);
						model.data=JSON.parse(redata.teamdraw.content);						
					}
	            },
	            websocketclose(e){  //关闭
	                console.log("connection closed (" + e.code + ")");
	            }							
			},
			mounted:function(){
				this.$nextTick(function(){
					if(this.use==0){
						model.getlocation();
						this.initWebSocket();
						this.websocketonmessage();
						$('input').attr('readonly','')
						$('textarea').attr('readonly','')							
					}						
				})
			}			
		})

	</script>
</html>
